

import React, { useRef, useEffect, useState } from 'react';
import { Link, history } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import { Input, Card, Cascader, Form, notification } from 'antd';
import { all } from '@/services/cate/api'
import { create } from '@/services/product/api'
import ProForm, {
    StepsForm,
    ProFormText,
    ProFormDatePicker,
    ProFormSelect,
    ProFormTextArea,
    ProFormCheckbox,
    ProFormRadio,
    ProFormDateRangePicker,
    ProFormDigit,
} from '@ant-design/pro-form';

const Category = () => {
    const formRef = useRef();
    const [myData, setMyData] = useState([])
    useEffect(() => {
        all().then(result => {
            setMyData(result.data)
        })
    }, [])

    function onChange(value) {
        console.log(value[2]);
    }

    const header = {
        title: '添加商品',
        breadcrumb: {
            itemRender: (route, params, routes, paths) => {
                return (
                    <Link to={route.path}>{route.breadcrumbName}</Link>
                )
            },
            routes: [
                {
                    path: '',
                    breadcrumbName: '商品',
                },
                {
                    path: '/product/category',
                    breadcrumbName: '商品管理',
                },
                {
                    path: '',
                    breadcrumbName: '当前页面',
                },
            ],
        }
    }

    return (
        <PageContainer header={header} ghost={true}>
            <Card>
                <StepsForm
                    formRef={formRef}
                    onFinish={async (values) => {
                        // await waitTime(1000);
                        console.log(values)
                        const prod = {
                            name: values.name,
                            first_cate_id: values.cate[0],
                            second_cate_id: values.cate[1],
                            third_cate_id: values.cate[2],
                            type: 0,
                            status: values.status,
                            price: values.price,
                            spec_type: values.spec_type,
                        }
                        create(prod).then(data => {
                            console.log(data)
                            notification['success']({
                                message: '添加成功',
                                // description:
                                //   'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
                            })
                            history.push('/product/list')
                        })
                        // message.success('提交成功');
                    }}
                    formProps={{
                        validateMessages: {
                            required: '此项为必填项',
                        },
                    }}
                >
                    <StepsForm.StepForm
                        name="base"
                        title="基本信息"
                        stepProps={{
                            description: '这里填入的都是基本信息',
                        }}
                        onFinish={async () => {
                            console.log(formRef.current?.getFieldsValue());
                            // await waitTime(1000);
                            return true;
                        }}
                    >
                        <ProFormText
                            name="name"
                            label="商品名称"
                            width="md"
                            tooltip="最长为 24 位，用于标定的唯一 id"
                            placeholder="请输入名称"
                            rules={[{ required: true }]}
                        />
                        <Form.Item
                            // rules={[{ validator: checkPrice }]}
                            name="cate"
                            label="商品分类"
                            rules={[{ required: true }]}
                        >
                            <Cascader options={myData} onChange={onChange} placeholder="请选择分类" />
                        </Form.Item>

                        {/* <ProFormDatePicker name="date" label="日期" /> */}
                        {/* <ProFormDateRangePicker name="dateTime" label="时间区间" /> */}
                        {/* <ProFormTextArea name="remark" label="备注" width="lg" placeholder="请输入备注" /> */}
                    </StepsForm.StepForm>
                    <StepsForm.StepForm
                        name="checkbox"
                        title="价格库存"
                        stepProps={{
                            description: '这里填入运维参数',
                        }}
                        initialValues={{
                            spec_type: '0',
                        }}
                        onFinish={async () => {
                            console.log(formRef.current?.getFieldsValue());
                            return true;
                        }}
                    >
                        <ProFormRadio.Group
                            name="spec_type"
                            label="规格类型"
                            rules={[{ required: true }]}
                            options={[
                                {
                                    label: '单规格',
                                    value: '0',
                                },
                                {
                                    label: '多规格',
                                    value: '1',
                                },
                            ]}
                        />
                        <ProFormDigit
                            label="商品价格"
                            name="price"
                            rules={[{ required: true }]}
                            min={0}
                            fieldProps={{ precision: 0 }}
                        />
                    </StepsForm.StepForm>
                    <StepsForm.StepForm
                        name="time"
                        title="其他设置"
                        stepProps={{
                            description: '这里填入发布判断',
                        }}
                        initialValues={{
                            status: '0',
                        }}
                    >
                        <ProFormRadio.Group
                            name="status"
                            label="上架设置"
                            rules={[{ required: true }]}
                            options={[
                                {
                                    label: '立即上架',
                                    value: '0',
                                },
                                {
                                    label: '暂不上架',
                                    value: '1',
                                },
                            ]}
                        />
                    </StepsForm.StepForm>
                </StepsForm>
            </Card>

        </PageContainer>
    );
};

export default Category;
